<template>
  <Pad v-if="record">
    <van-cell-group class="links">
      <van-cell title="浆站名称" :value="record.stationName" size="large" class="station" />
      <van-cell title="献浆人" :value="record.devoteName" size="large" />
      <van-cell title="联系方式" :value="record.devotePhone" size="large" />
    </van-cell-group>
    <yd-cell-group class="links">
      <yd-cell-item v-for="item in record.devoteRecord">
        <span slot="left" class="date">{{ item.lastDate }}</span>
        <span slot="right" class="right">
          <span class="status">献浆完成</span>
          <span class="income">+{{ item.amount }}</span>
        </span>
      </yd-cell-item>
    </yd-cell-group>
  </Pad>
</template>

<script>
import Pad from "@/components/pad";
import { CellGroup as YdCellGroup, CellItem } from "vue-ydui/dist/lib.rem/cell";
import { bloodRecord } from '@/api/user'

export default {
  data() {
    return {
      record:''
    };
  },
  created() {
    bloodRecord().then(({ data }) => {
      this.record = data;
    })
  },
  components: {
    "yd-cell-group": YdCellGroup,
    "yd-cell-item": CellItem,
    Pad
  }
};
</script>

<style lang='scss'>
.links {
  border-radius: 0.213333rem /* 16/75 */;
  overflow: hidden;
  margin-bottom: 0.4rem /* 30/75 */;
}
.station {
  .van-cell__value {
    color: #333333;
  }
}
.right {
  .status {
    font-size: 0.4rem /* 30/75 */;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 0.493333rem /* 37/75 */;
    margin-right: 0.8rem /* 60/75 */;
  }
  .income {
    font-size: 0.533333rem /* 40/75 */;
    font-weight: 500;
    color: rgba(255, 74, 80, 1);
    line-height: 0.533333rem /* 40/75 */;
  }
}
.yd-cell-item {
  height: 1.6rem /* 120/75 */;
}
.date {
  font-size: 0.4rem /* 30/75 */;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: .493333rem /* 37/75 */;
}
</style>
